<template>
  <!--  根据发现级别-->
  <div>
    <div ref="ProblemCheckLevel" :style="{height: height+'px'}">

    </div>

    <Modal :title="title" :transfer=false v-model="model1" :width=1000 footer-hide>
      <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据！"
             @on-sort-change="sortChange"
             :loading="loading" size="small" border :columns="columns" :data="dataTable">
      </Table>
      <Row style="margin-right:10px;">
        <Col span="24">
          <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                show-total show-sizer show-elevator/>
        </Col>
      </Row>
    </Modal>
  </div>

</template>

<script>
import echarts from "echarts";
import {Api} from '@/api/index.js'

export default {
  name: "ProblemCheckLevel",
  props: {
    right: {
      type: String,
      default: "3%",
    },
    radius: {
      type: Array,
      default: ['35%', '55%'],
    },
    height: {
      type: Number,
      default: 300
    },
    dataToQuery: {
      type: Object,
      default: {},
    },
    accountType: {
      type: String,
    }
  },
  data() {
    return {
      tableHeight: '',
      loading: false,
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      title: '发现级别明细',
      model1: false,
      dataToQuery: {},
      dataTable: [],
      columns: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          title: '单位名称',
          minWidth: 200,
          align: 'center',
          key: 'companyName',
        },
        {
          title: '集团',
          minWidth: 150,
          align: 'center',
          key: 'groupCompany',
          sortable: "custom",
        },
        {
          title: '二级集团',
          minWidth: 150,
          align: 'center',
          key: 'twoGroup',
          sortable: "custom",
        },
        {
          title: '企业',
          minWidth: 150,
          align: 'center',
          key: 'company',
          sortable: "custom",
        },
        {
          title: '政府',
          minWidth: 150,
          align: 'center',
          key: 'government',
          sortable: "custom",
        },
      ],
      problemCheckLevel: [
        {value: 1048, name: '二级集团'},
        {value: 735, name: '企业'},
        {value: 580, name: '政府'},
        {value: 484, name: '集团'},
      ],

      eQueryUrl: Api.problemCheckLevel,
      queryUrl: Api.problemCheckLevelItem,

    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query();
  },
  methods: {
    query() {
      let _this = this;
      let container = echarts.init(this.$refs.ProblemCheckLevel);

      this.$http.post(this.eQueryUrl + this.accountType, this.dataToQuery).then(res => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        if (res.data.status === 200) {
          let option = _this.getOption(res.data.data);
          container.setOption(option);
          container.on("click", this.onSelect);
        }
        window.onresize = container.resize;
      }).catch(e => {
        console.log(e)
        this.$Message.error("查询失败")
      });


    },
    onSelect(param) {
      event.stopPropagation() // 阻止冒泡
      this.queryTable();
      this.model1 = true;

    },
    queryTable() {
      this.loading = true
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        conditions: this.dataToQuery
      };

      this.$http.post(this.queryUrl + this.accountType, data).then((res) => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
        this.loading = false
      })
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.queryTable();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.queryTable();
    },
    sortChange(data) {
      if (data.order === 'asc' || data.order === 'desc') {
        let order = data.key
        this.dataToQuery.dynamicSort = order + ' ' + data.order
        this.queryTable()
      }
    },
    getOption(data) {
      let _this = this;
      _this.problemCheckLevel = data;
      return {

        tooltip: {
          show: true,
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          right: this.right,
          y: "center",
          type: 'scroll',
          itemHeight: 18,
          tooltip: {
            show: true
          },
          formatter: function (name) {
            let total = 0;
            let target;
            for (let i = 0; i < _this.problemCheckLevel.length; i++) {
              total += _this.problemCheckLevel[i].value;
              if (_this.problemCheckLevel[i].name == name) {
                target = _this.problemCheckLevel[i].value;
              }
            }
            if (!target) {
              target = 0;
            }
            let percentage = 0
            if (total) {

              percentage = ((target / total) * 100).toFixed(2) + '%';
            }

            return name + '  ' + target + '  ' + percentage;
          },
        },
        color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
        series: [
          {
            name: '问题总数',
            type: 'pie',
            radius: this.radius,
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 8,
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data: _this.problemCheckLevel
          }
        ]
      };
    },


  }

}
</script>

<style scoped>

</style>
